<%--
  Created by IntelliJ IDEA.
  User: 24588
  Date: 2022-08-31
  Time: 21:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        $(function () {
           var usernameFlag=false;
            $("#name").blur(function () {
                    var name = $(this).val();

                   $.ajax({
                       url:"http://localhost:8080/Student?action=checkName&name="+name,
                       method:"GET",
                       dataType:"JSON",//服务端返回的数据是json
                       success:function (data) {
                           if(data.code==100){
                               usernameFlag=false;
                           }else{
                               usernameFlag=true;
                           }
                           $("#nameMsg").text(data.msg);
                       }
                   });
            });
            $("#studentForm").submit(function () {
                if(!usernameFlag){
                    alert("表单验证未通过")
                }
                    return usernameFlag;
            })
        })


    </script>
</head>
<body>
<h3>添加学生</h3>
<form id="studentForm" method="post" action="http://localhost:8080/Student?action=add">
   <table border="1">
       <tr>
           <td>姓名:</td>
           <td>
<%--               //给输入框绑定一个失去焦点事件--%>
               <input type="text" id="name" name="name" value="皓月">
               <font color="red" id="nameMsg"></font>
           </td>
       </tr>
       <tr>
           <td>年龄:</td>
           <td>
               <input type="text" name="age" value="18">
           </td>
       </tr>
       <tr>
           <td>性别:</td>
           <td>
               <input type="radio" name="sex" value="1" checked>男
               <input type="radio" name="sex" value="0" >女
           </td>
       </tr>
       <tr>
           <td>手机号:</td>
           <td>
               <input type="text" name="phone" value="1584586583">
           </td>
       </tr>
       <tr>
           <td>邮箱:</td>
           <td>
               <input type="text" name="email" value="4352@qq.com">
           </td>
       </tr>
       <tr>
           <td>爱好:</td>
           <td>
               <input type="checkbox" name="loves" value="sing">唱
               <input type="checkbox" name="loves" value="jump">跳
               <input type="checkbox" name="loves" value="rap">rap
               <input type="checkbox" name="loves" value="basketball">篮球
           </td>
       </tr>
       <tr>
           <td>课程:</td>
          <td>
              <select name="course">
                  <option value="Java">Java从入门到放弃</option>
                  <option value="C++">C++入门基础</option>
                  <option value="Html">html基础教程</option>
                  <option value="Python">Python权威指南</option>
              </select>
          </td>
       </tr>
       <tr>
           <td colspan="2">
               <input type="submit" value="添加">
               <input type="reset" value="重置">
           </td>
       </tr>
   </table>
</form>

</body>
</html>
